<template>
	<view class="pb30">
		<!-- 顶部商家信息盒子 -->
		<view class="flex bg-f topbox color9 fs24">
			<view class="">
				<image
					:src="brandDetail.logo.url"
					class="w100 h100 mr20 radius16"></image>
			</view>
			<!-- 左边的盒子 -->
			<view class="flex row-between flex1">
				<view class="flex  row-between flex1 u-border-right col-center">
					<text class="fs28 color3 fw">{{brandDetail.name}}</text>
					<!-- <view class="">
						<text>ID：</text>
						<text>2312321</text>
					</view> -->
				</view>
				<view class="flex row-column col-center row-around pl60 pr60">
					<text>销量 </text>
					<text>{{brandDetail.sales}}</text>
				</view>
			</view>
		</view>
		<!-- //顶部商家信息盒子 -->

		<view class="pl30 pr30 mt30">
			<!-- 轮播图区域 -->
			<view class="wrap">
				<u-swiper :list="list" height="300"></u-swiper>
			</view>
			<!-- //轮播图区域 -->

			<!-- tab导航 -->
			<view :class="['bg-f tabbox',current==1?'mb20':'']">
				<!-- <u-tabs :list="list2" :is-scroll="false" :current="current" @change="change" bg-color='#F5F5F5' active-color="#D23030"/> -->
				<view :class="['fs28', 'flex1', 'tabbox1',current==0?'activeColor':'']" @click="change(0)">全部商品</view>
				<view class="line"></view>
				<view :class="['fs28', 'flex1',current==1?'activeColor':'']" @click="change(1)">品牌介绍</view>
			</view>
			<!-- //tab导航 -->
			
			<!-- 商品列表区域 -->
			<goodsList v-show="current==0" :goodslist="goodsList"/>
			<!-- //商品列表区域 -->
			
			<!-- 品牌介绍区域 -->
			<view class="fs24" v-show="current==1">
				<!-- 企业介绍盒子 -->
				<view class="bg-f text-center pt30 pl30 pb30 pr30 radius16">
					<!-- <view class="mb30">{{brandDetail.name}}</view> -->
					<u-read-more>
							<rich-text :nodes="brandDetail.content"></rich-text>
					</u-read-more>
				</view>
				<!-- //企业介绍盒子 -->
				
				<!-- 联系电话盒子 -->
				<view class="bg-f mt20 h88 flex col-center row-between pl30 pr30 color9 radius16">
					<view class="">
						<text class=" color3 mr20" @click="$tool.phone(brandDetail.mobile)">联系电话</text>
						<text>{{brandDetail.mobile}}</text>
					</view>
					<view class="ml60">
						<u-icon name="phone-fill" color="#0ED306" size="28" @click="$tool.phone(brandDetail.mobile)"></u-icon>
					</view>
				</view>
				<!-- //联系电话盒子 -->
				
				<!-- 联系地址盒子 -->
				<view class="bg-f mt20 h88 flex col-center pl30 pr30 color9 radius16">
					<text class=" color3 mr30">联系地址</text>
					<text class="fs24">{{brandDetail.address}}</text>
				</view>
				<!-- //联系地址盒子 -->
				
				<!-- 企业相册盒子 -->
				<view class="radius16 pl30 pr30 pt30 pb30 bg-f mt20">
					<view class="mb20 fs24  color3">企业相册</view>
					<!-- 大尺寸图片 -->
					<view class="radius16" v-if="album.length>0">
						<image :src="album[0]" class="w-max radius16 h380"  @click="pirview1(0)"></image>
					</view>
					<!-- //大尺寸图片 -->
					
					<!-- 小尺寸图片 -->
				<!-- 	<view class="flex flex-wrap">
						<image :src="item" class="h190 minImg radius16 mt30 mr30" v-for="(item,i) in album[1]" :key='i' mode="widthFix" @click="pirview2(i)"></image>
					</view> -->
					<!-- //小尺寸图片 -->
					
					<!-- 中尺寸图片 -->
					<view class="flex flex-wrap">
						<image :src="item2" class="h200 zhongImg radius16 mt30 mr30" v-for="(item2,i2) in album[2]" :key='i2' mode="widthFix" @click="pirview3(i2)"></image>
					</view>
					<!-- //中尺寸图片 -->
				</view>
				<!-- //企业相册盒子 -->
			</view>
			<!-- //品牌介绍区域 -->	
		</view>


	</view>
</template>

<script>
	import goodsList from '@/components/goodsList/goodsList.vue'
	export default {
		name:'brandDetail',
		components:{goodsList},
		onLoad(opt) {
			// console.log(opt)
			this.shop_id=opt.shop_id
			this.query.shop_id=opt.shop_id
			//获取店铺详情
			this.getbrandDetail()
			//获取店铺商品列表
			this.getBrandShopGoods()
			//获取店铺轮播图
			this.getshopBanner()
		},
		data() {
			return {
				shop_id:'',
				brandDetail:{
					logo:''
				},
				//商品列表
				goodsList:[],
				//企业图片
				album:[],
				//店铺商品查询参数
				query:{
					shop_id:'',
					page:1,
					size:10
				},
				list: [],
				list2: [{
					name: '全部商品'
				}, {
					name: '品牌介绍',
				}],
				//tab栏选中
				current: 1,
			};
		},
		methods: {
			//获取店铺详情
			getbrandDetail(){
				this.$api.brandDetail({shop_id:this.shop_id}).then(res=>{
					// console.log(res)
					this.brandDetail=res.data
					this.album=res.data.album
					console.log('222',this.album[1])
				})
			},
			//获取店铺商品列表
			getBrandShopGoods() {
				this.$api.brandshopGoods(this.query).then(res=>{
					// console.log(res)
					this.goodsList=res.data
				})
			},
			//获取店铺轮播图
			getshopBanner() {
				this.$api.shopBanner({id:this.shop_id}).then(res=>{
					// console.log(111,res)
					res.data.forEach(item=>{
						let obj={}
						obj.image=item
						this.list.push(obj)
					})
				})
			},
			//预览图片
			//预览第一排大图
			pirview1(i) {
				uni.previewImage({
					current:i,
					urls:this.album[0].map(item=>item)
				})
			},
			pirview2(i) {
				uni.previewImage({
					current:i,
					urls:this.album[1].map(x=>x)
				})
			},
			pirview3(i) {
				uni.previewImage({
					current:i,
					urls:this.album[2].map(x=>x)
				})
			},
			change(index) {
				this.current = index;
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F5F5;
	}

	.topbox {
		padding: 30rpx;
		height: 160rpx;
	}
	.goodsItem {
		width: 48%;
		background-color: #FFFFFF;
		padding-bottom: 20rpx;
		margin-top: 30rpx;
	}
	.minImg {
		width: 190rpx;
		height: 190rpx;
	}
	.minImg:nth-child(3n+0) {
		margin-right: 0!important;
	}
	.zhongImg {
		width: 47%;
		// height: 150rpx;
	}
	.zhongImg:nth-child(2n+0) {
		margin-right: 0!important;
	}
	// /deep/ #u-tab-item-0 ::after{
	// 	content:"台词：-";
	// 	background-color:yellow;
	// 	color:red;
	// 	background: #007AFF;
	// }
	.tabbox {
		display: flex;
		// justify-content: space-between;
		align-items: center;
		height: 100rpx;
		box-shadow: 0px 12rpx 10rpx 0px #E8EAEF;
		view {
			text-align: center;
		}
		.line {
			width: 2rpx;
			height:	40rpx;
			background-color: #ccc;
			margin-top: 30rpx;
			margin-bottom: 30rpx;
		}
	}
	.activeColor {
		color:#D23030;
	}
</style>
